.box-1, 
.box-2{
  position: relative;
  width: 448px;
  height: 252px;
  background-color: #eee;
  margin: 20px auto;
}

.mask {
  display: none;
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3) url(../img/arrow.png) no-repeat center;
  cursor: pointer;
}

/* 鼠标经过父盒子, 显示子元素遮罩 */
.box-1:hover .mask{
  display: block;
}

.box-2::before {
  content: '';
  display: none;
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .3) url(../img/arrow.png) no-repeat center;
  cursor: pointer;
}

.box-2:hover::before {
  display: block;
}